<%--
  Created by IntelliJ IDEA.
  User: 刘琛
  Date: 2020/7/18
  Time: 18:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%pageContext.setAttribute("APP_PATH", request.getContextPath());%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>维修统计</title>

    <script type="text/javascript" src="${APP_PATH }/recourse/js/echarts.min.js"></script>
    <meta name="description" content="Static &amp; Dynamic Tables" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="${APP_PATH }/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${APP_PATH }/assets/font-awesome/4.5.0/css/font-awesome.min.css" />

    <!-- page specific plugin styles -->
    <!-- text fonts -->
    <link rel="stylesheet" href="${APP_PATH }/assets/css/fonts.googleapis.com.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

    <!--[if lte IE 9]-->
    <%--    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />--%>
    <!--[endif]-->
    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="${APP_PATH }/assets/css/ace-rtl.min.css" />

    <link rel="stylesheet" href="${APP_PATH}/assets/fonts/iconfont.css"/>

    <script src="${APP_PATH }/recourse/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${APP_PATH }/assets/js/xadmin.js"></script>
    <script src="${APP_PATH }/assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]-->
    <%--    <script src="${APP_PATH }/assets/js/html5shiv.min.js"></script>--%>
    <%--    <script src="${APP_PATH }/assets/js/respond.min.js"></script>--%>
    <!--[endif]-->
</head>

<body class="no-skin">
<div id="navbar" class="navbar navbar-default          ace-save-state">
    <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>

        <div class="navbar-header pull-left">
            <a href="#" class="navbar-brand">
                <small>
                    <i><img src="${APP_PATH}/assets/images/ic_launcher_foreground.png" width="30"></i>
                    智慧维修
                </small>
            </a>
        </div>

        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="light-blue dropdown-modal">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="/mmmsimage/${admin.icon}" alt="无" />
                        <span class="user-info">
									<small>欢迎,</small>
									${admin.name}
								</span>

                        <i class="ace-icon fa fa-caret-down"></i>
                    </a>

                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li>
                            <a type="button"  onclick="xadmin.open('修改口令','${pageContext.request.contextPath}/admin/modvalue',470,300)" style="height: 30px;width: 120px;">
                                <i class="glyphicon glyphicon-edit"></i>
                                修改口令
                            </a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}">
                                <i class="ace-icon fa fa-power-off"></i>
                                退出登录
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div><!-- /.navbar-container -->
</div>

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try{ace.settings.loadState('main-container')}catch(e){}
    </script>

    <div id="sidebar" class="sidebar                  responsive                    ace-save-state" style="font-size: large">
        <script type="text/javascript">
            try{ace.settings.loadState('sidebar')}catch(e){}
        </script>

        <ul class="nav nav-list">

            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon iconfont icon-user_role orange"></i>
                    <span class="menu-text" style="font-size: large"> 注册审核 </span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>

                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/reviewerRegister">
                            <i class="menu-icon fa fa-caret-right"></i>
                            内部人员注册审核
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>

                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/outsideReg">
                            <i class="menu-icon fa fa-caret-right"></i>
                            维修方注册审核
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>
            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon glyphicon glyphicon-user blue"></i>
                    <span class="menu-text" style="font-size: large"> 人员管理 </span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>

                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/statispage">
                            <i class="menu-icon fa fa-caret-right"></i>
                            人员分布统计
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/insideManage">
                            <i class="menu-icon fa fa-caret-right"></i>
                            内部人员
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>
                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/peopleMangage">
                            <i class="menu-icon fa fa-caret-right"></i>
                            维修方人员
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>
            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon iconfont icon-svgorderred green"></i>
                    <span class="menu-text" style="font-size: large"> 维修单详情 </span>

                    <b class="arrow fa fa-angle-down"></b>
                </a>

                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/info_show">
                            <i class="menu-icon fa fa-caret-right"></i>
                            维修信息统计图
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/allorderdetails">
                            <i class="menu-icon fa fa-caret-right"></i>
                            正在维修信息
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/ordered_details">
                            <i class="menu-icon fa fa-caret-right"></i>
                            已完成维修信息
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/allorders">
                            <i class="menu-icon fa fa-caret-right"></i>
                            所有维修信息
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>
            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon iconfont icon-__equipment orange"></i>
                    <span class="menu-text" style="font-size: large"> 设备管理 </span>
                    <b class="arrow fa fa-angle-down"></b>
                </a>
                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/equipStatis">
                            <i class="menu-icon fa fa-caret-right"></i>
                            设备统计信息
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/equipmentMan">
                            <i class="menu-icon fa fa-caret-right"></i>
                            所有设备信息
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>
            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon iconfont icon-danwei blue"></i>
                    <span class="menu-text" style="font-size: large">报修单位管理</span>
                    <b class="arrow fa fa-angle-down"></b>
                </a>
                <b class="arrow"></b>

                <ul class="submenu">
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/localStatis">
                            <i class="menu-icon fa fa-caret-right"></i>
                            单位维修费用统计
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="${pageContext.request.contextPath}/admin/repairLocal">
                            <i class="menu-icon fa fa-caret-right"></i>
                            报修单位信息
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>
        </ul><!-- /.nav-list -->

        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
    </div>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        所有维修信息
                    </li>
                    <li class="active">统计信息</li>
                </ul><!-- /.breadcrumb -->
            </div>
            <div class="page-content">

                <div class="row">
                    <div class="col-xs-12">
                        <div class="clearfix">
                            <div class="pull-right tableTools-container"></div>
                        </div>
                        请输入年份： <select id="myYear" >
                                         <option value="${year}" selected="selected">${year}</option>
                                    </select>
                        <button id = "btn" name = "btn" type="button">确认选择</button><br><br>
                        <div style="width:1000px;height: 400px;margin-left: 30px;">
                            <div id="main" style="width: 500px;height:400px;float: left;background: white;"></div>
                            <div id="main2" style="width:500px;height:400px;float: left;background: white;"></div>
                        </div>

                    </div>
                </div>
                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
</div>
</div>

<div class="footer">
    <div class="footer-inner">
        <div class="footer-content">
            <i><img src="${APP_PATH}/assets/images/ic_launcher_foreground.png" width="20"></i>
            <span class="bigger-120">
                湖北南星化工总厂 &copy; 2020
            </span>

        </div>
    </div>
</div>

<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div>


<script src="${APP_PATH }/assets/js/jquery-2.1.4.min.js"></script>

<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='${APP_PATH }/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="${APP_PATH }/assets/js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->
<script src="${APP_PATH }/assets/js/jquery.dataTables.min.js"></script>
<script src="${APP_PATH }/assets/js/jquery.dataTables.bootstrap.min.js"></script>
<script src="${APP_PATH }/assets/js/dataTables.buttons.min.js"></script>
<script src="${APP_PATH }/assets/js/buttons.flash.min.js"></script>
<script src="${APP_PATH }/assets/js/buttons.html5.min.js"></script>
<script src="${APP_PATH }/assets/js/buttons.print.min.js"></script>
<script src="${APP_PATH }/assets/js/buttons.colVis.min.js"></script>
<script src="${APP_PATH }/assets/js/dataTables.select.min.js"></script>

<!-- ace scripts -->
<script src="${APP_PATH }/assets/js/ace-elements.min.js"></script>
<script src="${APP_PATH }/assets/js/ace.min.js"></script>
<script>
    $("#btn").click(function () {
        //获取input表单文本框的时间值
        var year = document.getElementById("myYear").value;

        window.location.href="${pageContext.request.contextPath}/admin/info_show?times="+year;

    });

</script>
<script language="javascript" type="text/javascript">
    window.onload=function(){
//设置年份的选择
        var myDate= new Date();
        var startYear=myDate.getFullYear()-5;//起始年份
        var endYear=myDate.getFullYear();//结束年份
        var obj=document.getElementById('myYear')
        for (var i=startYear;i<=endYear;i++)
        {
            obj.options.add(new Option(i,i));
        }
        obj.options[obj.options.length-51].selected=1;
    }
</script>
<script>
    var myChart1 = echarts.init(document.getElementById('main2'));
    option = {
        title: {
            text: '${year}维修单状态数目(月)',
            left: 'center',
        },
        tooltip: {
            trigger: 'axis',

            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            x: 'center',
            top:'30',
            data: ['正在进行', '已经完成', '异常结束']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '正在进行',
                type: 'bar',
                   data: [${list3.get(0)},${list3.get(1)}, ${list3.get(2)}, ${list3.get(3)}, ${list3.get(4)}, ${list3.get(5)}, ${list3.get(6)},
                       ${list3.get(7)}, ${list3.get(8)}, ${list3.get(9)}, ${list3.get(10)}, ${list3.get(11)}]

            },
            {
                name: '已经完成',
                type: 'bar',
                 data: [${list1.get(0)},${list1.get(1)}, ${list1.get(2)}, ${list1.get(3)}, ${list1.get(4)}, ${list1.get(5)}, ${list1.get(6)},
                     ${list1.get(7)}, ${list1.get(8)}, ${list1.get(9)}, ${list1.get(10)}, ${list1.get(11)}]

            },
            {
                name: '异常结束',
                type: 'bar',
                  data: [${list2.get(0)},${list2.get(1)}, ${list2.get(2)}, ${list2.get(3)}, ${list2.get(4)}, ${list2.get(5)}, ${list2.get(6)},
                     ${list2.get(7)}, ${list2.get(8)}, ${list2.get(9)}, ${list2.get(10)}, ${list2.get(11)}]
            }
        ]
    };
    myChart1.setOption(option);

</script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title: {
            text: '${year}年维修方维修次数(月)',
            left: 'center',
        },
        tooltip: {
            trigger: 'axis',

            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            x: 'center',
            top:'30',
            data: ['维修方']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '维修方',
                type: 'bar',
                data: [${list_1.get(0)}, ${list_1.get(1)},${list_1.get(2)},${list_1.get(3)},${list_1.get(4)},
                    ${list_1.get(5)},${list_1.get(6)},${list_1.get(7)},${list_1.get(8)},${list_1.get(9)},${list_1.get(10)},${list_1.get(11)}]

            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>

